/// 图文按钮
import 'package:flutter/material.dart';
import 'package:jd_flutter/base/widget/image/jd_network_image.dart';

enum IconTextAlignment {
  iconTopTextBottom, //图在上文字在下
  iconBottomTextTop, //图在下文字在上
  iconLeftTextRight, //图在左文字在右
  iconRightTextLeft, //图在右文字在左
}

class TextImageButton extends StatelessWidget {
  const TextImageButton(
      {Key? key,
      this.onPressed,
      this.onLongPress,
      this.imageWidget,
      this.text,
      this.alignment,
      this.intervalMargin = 4.0,
      this.shape,
      this.elevation,
      this.disabledElevation,
      this.textColor,
      this.disabledTextColor,
      this.backgroundColor,
      this.disabledBackgroundColor,
      this.padding,
      this.colorBrightness,
      this.focusColor,
      this.focusElevation,
      this.highlightColor,
      this.highlightElevation,
      this.hoverColor,
      this.hoverElevation,
      this.splashColor,
      this.enableFeedback = true,
      this.minWidth,
      this.materialTapTargetSize,
      this.height})
      : super(key: key);

  ///图文按钮-图片/图标
  /// 注意：如果要设置按钮禁用状态的图标颜色，不要设置 Icon 颜色
  ///  - 可以直接设置 ImageButton的 textColor 和 disabledTextColor
  final Widget? imageWidget;

  ///图文按钮-文字
  /// 注意：如果要设置按钮禁用状态的文字颜色，不要设置 label 文字颜色
  ///     - 可以直接设置 ImageButton的 textColor 和 disabledTextColor
  final Widget? text;

  ///图文按钮-点击事件
  final void Function()? onPressed;

  ///图文按钮-长按事件
  final void Function()? onLongPress;

  ///图文按钮-对齐方式
  ///
  /// - iconTopTextBottom,//图在上文字在下
  ///
  /// - iconBottomTextTop,//图在下文字在上
  ///
  /// - iconLeftTextRight,//图在左文字在右
  ///
  /// - iconRightTextLeft,//图在右文字在左
  ///
  /// 默认 iconLeftTextRight 图在左文字在右
  final IconTextAlignment? alignment;

  ///图文按钮-图片和文字之间的间隔
  /// - 默认间隔 4.0
  final double intervalMargin;

  ///图文按钮- 文字的颜色
  final Color? textColor;

  ///图文按钮- 禁用状态文字的颜色
  final Color? disabledTextColor;

  ///图文按钮
  final Color? backgroundColor;

  ///图文按钮-禁用状态背景色
  final Color? disabledBackgroundColor;

  ///图文按钮-下方阴影的大小(注意-如果无效，请检查是否设置了背景色)
  /// 如果想把背景色设置为透明色，但是有灰色背景，请将 elevation 设置为 0
  final double? elevation;

  ///图文按钮-禁用状态阴影
  final double? disabledElevation;

  ///图文按钮-内边距
  final EdgeInsetsGeometry? padding;
  final MaterialTapTargetSize? materialTapTargetSize;

  ///图文按钮-其他一些设置
  final ShapeBorder? shape;
  final Color? focusColor;
  final Color? hoverColor;
  final Color? highlightColor;
  final Color? splashColor;
  final Brightness? colorBrightness;

  final double? focusElevation;
  final double? hoverElevation;
  final double? highlightElevation;
  final bool enableFeedback;

  final double? minWidth;
  final double? height;

  @override
  Widget build(BuildContext context) {
    return MaterialButton(
      onPressed: onPressed,
      onLongPress: onLongPress,
      elevation: 0,
      color: backgroundColor,
      textColor: Colors.white,
      disabledColor: disabledBackgroundColor,
      disabledTextColor: disabledTextColor,
      shape: shape,
      padding:
          padding ?? const EdgeInsets.symmetric(horizontal: 0, vertical: 0),
      focusColor: focusColor,
      hoverColor: hoverColor,
      materialTapTargetSize: materialTapTargetSize,
      hoverElevation: 0,
      highlightColor: highlightColor,
      focusElevation: 0,
      disabledElevation: 0,
      highlightElevation: 0,
      splashColor: splashColor,
      enableFeedback: enableFeedback,
      minWidth: minWidth,
      height: height,
      child: buildChildWidget(),
    );
  }

  /// 获取对齐方式
  IconTextAlignment getIconTextAlignment() {
    if (alignment == null) {
      return IconTextAlignment.iconLeftTextRight;
    }
    return alignment!;
  }

  Widget buildChildWidget() {
    switch (getIconTextAlignment()) {
      // 图在左文字在右
      case IconTextAlignment.iconLeftTextRight:
        {
          return Row(
            mainAxisAlignment: MainAxisAlignment.center,
            children: [
              imageWidget ?? Gap.empty,
              SizedBox(
                width: intervalMargin,
              ),
              text ?? Gap.empty,
            ],
          );
        }

      //图在右文字在左
      case IconTextAlignment.iconRightTextLeft:
        {
          return Row(
            mainAxisAlignment: MainAxisAlignment.center,
            children: [
              text ?? Gap.empty,
              SizedBox(
                width: intervalMargin,
              ),
              imageWidget ?? Gap.empty,
            ],
          );
        }

      //图在上文字在下
      case IconTextAlignment.iconTopTextBottom:
        {
          return Column(
            mainAxisAlignment: MainAxisAlignment.center,
            children: [
              imageWidget ?? Gap.empty,
              SizedBox(
                height: intervalMargin,
              ),
              text ?? Gap.empty,
            ],
          );
        }

      // 图在下文字在上
      case IconTextAlignment.iconBottomTextTop:
        {
          return Column(
            mainAxisAlignment: MainAxisAlignment.center,
            children: [
              text ?? Gap.empty,
              SizedBox(
                height: intervalMargin,
              ),
              imageWidget ?? Gap.empty,
            ],
          );
        }
    }
  }
}
